import "./index.css";
// 引入路由方法
import { useNavigate } from "react-router-dom";
// 引入 阿里矢量图标
import { createFromIconfontCN } from "@ant-design/icons";
import { useState, useEffect } from "react";
import { getShoppingList } from "../../../api/admin";
let IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_4148694_t974jrk17t.js",
});
function Search() {
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  };
  const [val, setVal] = useState("");
  const [list, setList] = useState([]);
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        background: "#f5f5f5",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-around",
          padding: "8px",
          fontSize: "20px",
          background: "white",
        }}
      >
        <span onClick={back}>
          <IconFont type="icon-31fanhui1" />
        </span>
        <h5>搜索页</h5>
        <span>
          <IconFont type="icon-gengduo" />
        </span>
      </div>
      <label htmlFor="">
        <input
          type="text"
          value={val}
          style={{
            width: "260px",
            height: "35px",
            marginLeft: "30px",
            border: "none",
            outline: "none",
          }}
          onChange={(e) => setVal(e.target.value)}
        />
        <button
          style={{
            width: "60px",
            height: "35px",
            marginLeft: "10px",
            background: "#1baeae",
            border: "none",
          }}
          onClick={() => {
            getShoppingList({ name: val }).then((res) => {
              console.log(res);
              setList(res.data.data);
            });
          }}
        >
          搜索
        </button>
      </label>
      {list.map((item: any) => (
        <p
          key={item.id}
          onClick={() => {
            console.log(item);
            navigate("/list");
            localStorage.setItem("shoppingId", item.id);
          }}
          style={{
            fontSize: "25px",
            marginBottom: "10px",
            padding: "10px",
            display: "flex",
          }}
        >
          <img src={item.coverImage} style={{ width: "100px" }} />
          <span>
            {item.name}
            <p>￥{item.price}</p>
          </span>
        </p>
      ))}
    </div>
  );
}

export default Search;
